import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '扫描巡更',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});


  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Object get active => 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new),
          color: Colors.black,
          onPressed: () {
            print('返回');
          },
        ),
        elevation: 3,
        shadowColor: const Color.fromRGBO(243, 246, 251, 0.2),
        centerTitle: true,
        backgroundColor: Colors.white,
        title: const Text(
          "基本信息",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Container(
          decoration:
          const BoxDecoration(color: Color.fromRGBO(243, 246, 251, 1)),
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          child: ListView(
            children: [
              Container(
                color: Colors.white,
                padding: const EdgeInsets.fromLTRB(16, 15, 16, 15),
                child: Row(
                  children: [
                    ClipOval(
                      child: Image.network(
                        "http://fc-home.cn/zb_users/theme/tpure/style/images/boy.jpg",
                        fit: BoxFit.cover,
                        repeat: ImageRepeat.repeatY,
                        width: 42,
                        height: 42,
                      ),
                    ),
                    const SizedBox(width: 10),
                    const Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "陈牧驰",
                            style: TextStyle(fontSize: 16),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "测试网络",
                                style: TextStyle(fontSize: 16),
                              ),
                              Row(
                                children: [
                                  Text("2023-03-29",
                                      style: TextStyle(fontSize: 18)),
                                  Icon(
                                    Icons.keyboard_arrow_down,
                                    color: Colors.black,
                                    size: 24,
                                  ),
                                ],
                              )
                            ],
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              const SizedBox(height: 20),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: double.infinity,
                    color: Colors.white,
                    padding: const EdgeInsets.all(10),
                    child: Container(
                      height: 70,
                      padding: EdgeInsets.fromLTRB(10, 8, 10, 8),
                      decoration: BoxDecoration(
                          color: Color.fromRGBO(249, 251, 255, 1),
                          borderRadius: BorderRadius.circular(6)),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(right: 5),
                                child: const Icon(
                                  Icons.room,
                                  color: Color.fromRGBO(181, 197, 223, 1),
                                  size: 20,
                                ),
                              ),
                              const Text(
                                "签到地点：",
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Color.fromRGBO(79, 91, 110, 1)),
                              ),
                              const Text(
                                "汇智大厦",
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Color.fromRGBO(79, 91, 110, 1)),
                              ),
                            ],
                          ),
                          Row(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(right: 5),
                                child: const Icon(
                                  Icons.access_time_filled,
                                  color: Color.fromRGBO(181, 197, 223, 1),
                                  size: 20,
                                ),
                              ),
                              const Text(
                                "下次扫码时间：",
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Color.fromRGBO(79, 91, 110, 1)),
                              ),
                              const Text(
                                "15:55-16:05",
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Color.fromRGBO(56, 123, 230, 1)),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                      width: double.infinity,
                      color: Colors.white,
                      padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
                      height: 430,
                      child: ListView.builder(
                        itemCount: 20,
                        itemBuilder: (context, index) {
                          return TimeLineWidget(
                            isIndex: index,
                            active: 0,
                            child: Container(
                              margin:
                              const EdgeInsets.only(bottom: 10, top: 10),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  const Text(
                                    "00:00",
                                    style: TextStyle(fontSize: 18),
                                  ),
                                  if (index == active)
                                    Container(
                                      margin: const EdgeInsets.only(
                                          left: 12, right: 20),
                                      padding:
                                      const EdgeInsets.fromLTRB(12, 4, 12, 4),
                                      color:
                                      const Color.fromRGBO(223, 244, 255, 1),
                                      child: const Text(
                                        "已扫码",
                                        style: TextStyle(
                                            fontSize: 16,
                                            color:
                                            Color.fromRGBO(56, 123, 230, 1)),
                                      ),
                                    )
                                  else
                                    Container(
                                      margin: const EdgeInsets.only(
                                          left: 12, right: 20),
                                      padding:
                                      const EdgeInsets.fromLTRB(12, 4, 12, 4),
                                      color:
                                      const Color.fromRGBO(219, 219, 219, 1),
                                      child: const Text(
                                        "未扫码",
                                        style: TextStyle(
                                            fontSize: 16,
                                            color:
                                            Color.fromRGBO(102, 102, 102, 1)),
                                      ),
                                    ),
                                  const Text(
                                    "汇智大厦",
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Color.fromRGBO(79, 91, 110, 1)),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      ))
                ],
              )
            ],
          )),
    );
  }
}

class TimeLineWidget extends StatelessWidget {
  const TimeLineWidget({
    super.key,
    required this.isIndex,
    required this.active,
    required this.child,
  });
  final int isIndex;
  final int active;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          if (isIndex == active)
            Container(
              width: 15,
              height: 15,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Color.fromRGBO(56, 123, 230, 1),
              ),
              child: Center(
                child: Container(
                  width: 9,
                  height: 9,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                ),
              ),
            )
          else
            Container(
              width: 15,
              height: 15,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Color.fromRGBO(192, 212, 239, 1),
              ),
              child: Center(
                child: Container(
                  width: 9,
                  height: 9,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                ),
              ),
            ),
          const SizedBox(
            width: 10,
          ),
          Expanded(child: child),
        ],
      ),
    );
  }
}
